<template>
  <div class="body">
    <div class="left-board">
      <div class="logo">{{ title }}</div>
      <div class="logo-bottom">
        <div class="components-title">填空型</div>
        <div class="choose-1">
          <draggable :list="list1" class="item" :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneDog"
            @change="log" item-key="type" animation="1000">
            <template #item="{ element, index }">
              <div class="list-group-item-left" @click="addItem(index, element)">
                <div class="components-item">
                  <div class="components-body">{{ element.label }}</div>
                </div>
              </div>
            </template>
          </draggable>
        </div>

        <div class="components-title">选择型</div>
        <div class="choose-1">
          <draggable :list="list3" class="item" :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneDog"
            @change="log" item-key="type" animation="1000">
            <template #item="{ element }">
              <div class="list-group-item-left" @click="addItem(index, element)">
                <div class="components-item">
                  <div class="components-body">{{ element.label }}</div>
                </div>
              </div>
            </template>
          </draggable>
        </div>
        <!-- <div class="components-title">矩阵型</div>
        <div class="choose-1">
          <draggable
            :list="list6"
            class="item"
            :group="{ name: 'people', pull: 'clone', put: false }"
            :clone="cloneDog"
            @change="log"
            item-key="type"
            animation="1000"
          >
            <template #item="{ element }">
              <div
                class="list-group-item-left"
                @click="addItem(index, element)"
              >
                <div class="components-item">
                  <div class="components-body">{{ element.label }}</div>
                </div>
              </div>
            </template>
          </draggable>
        </div> -->
        <div class="components-title">文件型</div>
        <div class="choose-1">
          <draggable :list="list4" class="item" :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneDog"
            @change="log" item-key="type" animation="1000">
            <template #item="{ element }">
              <div class="list-group-item-left" @click="addItem(index, element)">
                <div class="components-item">
                  <div class="components-body">{{ element.label }}</div>
                </div>
              </div>
            </template>
          </draggable>
        </div>
        <div class="components-title">个人信息</div>
        <div class="choose-1">
          <draggable :list="list5" class="item" :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneDog"
            @change="log" item-key="type" animation="1000">
            <template #item="{ element }">
              <div class="list-group-item-left" @click="addItem(index, element)">
                <div class="components-item">
                  <div class="components-body">{{ element.label }}</div>
                </div>
              </div>
            </template>
          </draggable>
        </div>
      </div>
    </div>
    <div class="center-board" ref="wrap">
      <div class="operate">
        <el-button @click="goPreview" type="warning" plain>预览</el-button>
        <el-button @click="saveAll" type="primary" plain>保存</el-button>
        <el-button @click="publishAll" type="success" plain v-if="isTemplate == 0">发布</el-button>
        <el-button @click="clearAll" type="danger" plain>清空</el-button>
        <el-button type="info" plain @click="closeAll">关闭</el-button>
      </div>

      <el-form label-width="100px" :class="list.length == 0 ? 'm-empty' : ''" :label-position="labelPosition">
        <draggable :list="list" ref="draggable" class="draggable" @change="log2"
          :group="{ name: 'people', clone: 'false', put: true }" item-key="indexGlobal" animation="1000"
          ghost-class="ghost">
          <template #item="{ element, index }">
            <div @click="clickItem(index)" :class="element.isSelect == true ? ' select-bg' : ' unselect-bg'">
              <div class="delete" @click.stop="deleteItem(this, index)">
                <el-icon>
                  <Delete />
                </el-icon>
              </div>
              <div class="delete" @click.stop="copyItem(this, index)">
                <el-icon>
                  <CopyDocument />
                </el-icon>
              </div>
              <div class="list-group-item-right" v-if="element.type == '602'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-input :placeholder="element.placeholder"></el-input>
                </el-form-item>
              </div>
              <div class="list-group-item-right" v-if="element.type == '601'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <el-form-item :label="index + 1 + element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <div v-for="(item, index) in element.items" style="display: flex; width: 100%" :v-if="index == 0"
                    :key="index">
                    <label style="width: 140px"></label>
                    <div v-for="it in item.list">
                      <label>{{ it }}</label>
                    </div>
                  </div>
                  <div v-for="(item, index) in element.items" style="display: flex; width: 100%">
                    <label style="width: 140px">{{ item.title }}</label>
                    <div v-for="it in item.list">
                      <el-radio></el-radio>
                    </div>
                  </div>
                </el-form-item>
              </div>
              <div class="list-group-item-right" v-if="element.type == '10'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-input :placeholder="element.placeholder"></el-input>
                </el-form-item>
              </div>
              <div class="list-group-item-right" v-if="element.type == '20'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-input type="textarea" :placeholder="element.placeholder" :rows="element.line"></el-input>
                </el-form-item>
              </div>

              <div class="list-group-item-right" v-if="element.type == '23'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-input :placeholder="element.placeholder"></el-input>
                </el-form-item>
              </div>
              <div class="list-group-item-right" v-if="element.type == '25'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-input :placeholder="element.placeholder" type="password"></el-input>
                </el-form-item>
              </div>
              <div class="list-group-item-right" v-if="element.type == '125'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <esign class="esignature" ref="esign" :width="800" :height="200" :isCrop="isCrop"
                    :lineWidth="lineWidth" :lineColor="lineColor" :bgColor="bgColor" :isEdit="isEdit" />
                </el-form-item>
              </div>

              <div class="list-group-item-right" v-if="element.type == '30'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-radio-group>
                    <el-radio :label="item.title" name="type" aria-checked="false" v-for="item in element.items"
                      :key="item.title"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>

              <div class="list-group-item-right" v-if="element.type == '50'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-rate :v-model="element.name"></el-rate>
                </el-form-item>
              </div>

              <div class="list-group-item-right" v-if="element.type == '27'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <Editor v-model="contentValue" :init="init" :disabled="disabled" @onClick="onClick" />
                </el-form-item>
              </div>

              <div class="list-group-item-right" v-if="element.type == '60'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-select :placeholder="element.placeholder" size="large">
                    <el-option v-for="(item, index) in element.items" :key="index" :label="item.title">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div class="list-group-item-right" v-if="element.type == '70'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-upload list-type="picture-card" :on-preview="handlePictureCardPreview"
                    accept="image/jpeg,image/gif,image/png" :on-remove="handleRemove" :limit="element.limit"
                    disabled="true">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload>
                </el-form-item>
              </div>
              <div class="list-group-item-right" v-if="element.type == '80'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-upload list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                    :limit="element.limit" disabled="true">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload>
                </el-form-item>
              </div>

              <div class="list-group-item-right" v-if="element.type == '90'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-date-picker :type="element.dateType" :placeholder="element.placeholder">
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class="list-group-item-right" v-if="element.type == '95'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">

                  <el-time-picker :type="element.dateType" :placeholder="element.placeholder">
                  </el-time-picker>
                </el-form-item>
              </div>
              <div class="list-group-item-right" v-if="element.type == '97'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-time-picker :type="element.dateType" :placeholder="element.placeholder">
                  </el-time-picker>
                </el-form-item>
              </div>

              <div class="list-group-item-right" v-if="element.type == '100'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-slider :marks="marks"></el-slider>
                </el-form-item>
              </div>

              <div class="list-group-item-right" v-if="element.type == '40'">
                <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
                  {{ index + 1 }}.
                </div>

                <!-- <el-form-item :label="index + 1 + '     ' + element.label" prop="name" :rules="[ -->
                <el-form-item :label="element.label" prop="name" :rules="[
        { required: element.required, message: element.message },
      ]">
                  <el-checkbox-group>
                    <el-checkbox :label="item.title" name="type" v-for="item in element.items" :key="item.title">
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </div>
          </template>
        </draggable>
      </el-form>
    </div>
    <div class="right-board">
      <div class="logo-right">
        <el-tabs type="card" v-model="tabVaule" stretch="true">
          <el-tab-pane label="全局设置" name="全局设置">
            <h3>布局设置</h3>
            <el-divider class="m-line"></el-divider>
            <el-form ref="form2Ref" :model="form" label-width="80px" class="mb-right">
              <el-form-item label="编号显示">
                <el-switch v-model="showIndex" class="mb-2" @change="changeShowIndex" active-color="#409EFF"
                  inactive-color="#c3c4c3" active-text="是" inactive-text="否">
                </el-switch>
              </el-form-item>
              <el-form-item label="标签位置">
                <el-switch v-model="labelPositionIndex" active-color="#409EFF" inactive-color="#c3c4c3" active-text="上方"
                  inactive-text="左侧" @change="changePositon">
                </el-switch>
              </el-form-item>
            </el-form>
            <h3>授权设置</h3>
            <el-divider class="m-line"></el-divider>
            <el-form label-width="80px" class="mb-right" label-position="top">
              <el-form-item label="微信授权">
                <el-switch v-model="isAuthWxIndex" class="dateTimeRange" @change="changeIsAuthWxIndexIndex"
                  active-color="#409EFF" inactive-color="#c3c4c3" active-text="是" inactive-text="否">
                </el-switch>
              </el-form-item>
            </el-form>
            <h3>基本设置</h3>
            <el-divider class="m-line"></el-divider>
            <el-form ref="form2Ref" :model="form" label-width="80px" class="mb-right" label-position="top">
              <el-form-item label="时间控制">
                <el-switch v-model="showTimeIndex" class="dateTimeRange" @change="changeShowTimeIndex"
                  active-color="#409EFF" inactive-color="#c3c4c3" active-text="开" inactive-text="关">
                </el-switch>

                <el-date-picker v-model="daterange" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
                  v-if="showTimeIndex == true" range-separator="到" unlink-panels="true" start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="答题密码">
                <el-switch v-model="showPasswordIndex" class="dateTimeRange" @change="changeShowPasswordIndex"
                  active-color="#409EFF" inactive-color="#c3c4c3" active-text="开" inactive-text="关">
                </el-switch>
                <el-input type="password" v-if="showPasswordIndex == true" v-model="password"
                  placeholder="空表示不需要密码,需要密码则需填写此栏" />
              </el-form-item>
              <el-form-item label="答题后感谢语">

                <el-input type="text" v-model="finishMessage" placeholder="请输入答题后感谢语" />
              </el-form-item>

              <el-form-item>
                <el-button @click="saveSetting" type="primary" plain>保存设置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="题型设置" name="题型设置">
            <div class="right-content">
              <el-form v-model="form" v-if="indexGlobal != -1" label-width="100px" class="table-hg">
                <el-form-item label="标题">
                  <el-input v-model="form.label" :value="form.label"></el-input>
                </el-form-item>
                <el-form-item label="提示信息">
                  <el-input v-model="form.placeholder" :value="form.placeholder"></el-input>
                </el-form-item>
                <el-form-item label="是否必填">
                  <el-radio-group v-model="form.required" @change="changeRadio">
                    <el-radio :label="true" name="required">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="空值提醒" v-if="form.required == true">
                  <el-input v-model="form.message" :value="form.message"></el-input>
                </el-form-item>
                <el-form-item label="显示行数" v-if="form.type == 20">
                  <el-input-number v-model="form.line" :value="form.line" :min="1" :max="10" />
                </el-form-item>

                <el-form-item label="文件个数" v-if="form.type == 70">
                  <el-input-number v-model="form.limit" :value="form.limit" :min="1" :max="20" />
                </el-form-item>

                <el-form-item label="文件个数" v-if="form.type == 80">
                  <el-input-number v-model="form.limit" :value="form.limit" :min="1" :max="20" />
                </el-form-item>

                <el-divider v-if="form.items.length > 0"></el-divider>

                <el-form-item label="选项名称" style="margin-top: 10px" v-for="(item, index) in form.items" :key="item.type"
                  :inline="true">
                  <el-input v-model="item.title" :value="item.title" @keyup.enter="keyEnter"></el-input>
                  <el-button size="small" type="danger" class="delete-btn" v-if="form.items.length > 1"
                    @click="deleteItemName(index)">删除</el-button>
                  <el-button v-if="form.items.length == index + 1" type="primary" size="small" class="delete-btn"
                    @click="addItemName()">添加一项</el-button>
                </el-form-item>

                <el-divider v-if="form.items.length > 0"></el-divider>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import { ElMessage, ElMessageBox, ElConfigProvider } from "element-plus";
import { Eleme, Delete, Plus, CopyDocument } from "@element-plus/icons-vue";
import esign from "../../components/questionnaire/esign.vue";


//富文本

//引入tinymce编辑器
import Editor from "@tinymce/tinymce-vue";

//引入方式引入node_modules里的tinymce相关文件文件
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入则不显示编辑器
import "tinymce/themes/silver"; //编辑器主题，不引入则报错
import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标

// 引入编辑器插件
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import "tinymce/plugins/autosave"; //自动存稿
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/emoticons"; //表情
import "tinymce/plugins/fullpage"; //文档属性
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //水平分割线
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/importcss"; //引入css
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
import "tinymce/plugins/paste"; //粘贴插件
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/print"; //打印
import "tinymce/plugins/quickbars"; //快速工具栏
import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查找替换
import "tinymce/plugins/tabfocus"; //切入切出，按tab键切出编辑器，切入页面其他输入框中
import "tinymce/plugins/table"; //表格
import "tinymce/plugins/template"; //内容模板
import "tinymce/plugins/textcolor"; //文字颜色
import "tinymce/plugins/textpattern"; //快速排版
import "tinymce/plugins/toc"; //目录生成器
import "tinymce/plugins/visualblocks"; //显示元素范围
import "tinymce/plugins/visualchars"; //显示不可见字符
import "tinymce/plugins/wordcount"; //字数统计
import { httpService } from "@/utils/httpService";

export default {
  name: "custom-clone",
  display: "Custom Clone",
  order: 3,
  mounted() {
    this.uuid = this.$route.query.p;
    this.queryByUUId();
    tinymce.init({});
  },

  watch: {
    value(newValue) {
      this.contentValue = newValue;
    },
    contentValue(newValue) {
      this.$emit("input", newValue);
    },
  },
  components: {
    draggable,
    Eleme,
    Delete,
    Plus,
    Editor,
    esign,
    ElMessageBox,
    httpService,
    CopyDocument,
    ElConfigProvider
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave ",
    },
    toolbar: {
      type: [String, Array],
      default:
        "fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                table image media charmap emoticons hr pagebreak insertdatetime print preview | code selectall | indent2em lineheight formatpainter axupimgs",
    },
  },
  data() {
    return {
      isTemplate: 0,
      marks: {
        0: "0",
        20: "20",
        40: "40",
        60: "60",
        80: "80",
        100: "100",
      },
      title: "",
      isTimeControl: 0,
      isPassword: 0,
      uuid: "",
      isAuthWx: "",
      isAuthWxIndex: true,
      voteUrl: "",
      tabVaule: "全局设置",
      labelPosition: "top",
      labelPositionIndex: true,
      daterange: [],
      password: "",
      finishMessage: "答题完毕，感谢您的作答！",
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "#f2f2f2",
      resultImg: "",
      isEdit: false,
      isCrop: false,
      init: {
        language_url: "/tinymce/langs/zh_CN.js", //引入语言包文件
        language: "zh_CN", //语言类型
        skin_url: "/tinymce/skins/ui/oxide", //皮肤：浅色
        // skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色
        plugins: this.plugins, //插件配置
        toolbar: this.toolbar, //工具栏配置，设为false则隐藏
        // menubar: 'file edit',  //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        height: 300, //注：引入autoresize插件时，此属性失效
        placeholder: "在这里输入文字",
        branding: false, //tiny技术支持信息是否显示
        resize: false, //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
        // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
        elementpath: false, //元素路径是否显示

        content_style: "img {max-width:100%;}", //直接自定义可编辑区域的css样式
        // content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
        // images_upload_url: '/demo/upimg.php',  //后端处理程序的url
        // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          const img = "data:image/jpeg;base64," + blobInfo.base64();
          success(img);
        },
      },
      contentValue: this.value,
      showIndex: true,
      showTimeIndex: true,
      showPasswordIndex: true,
      showFinishMessageIndex: true,

      isEmpty: true,
      form: {},
      list: [],
      indexGlobal: -1,
      questionnaireId: 0,
      list1: [
        {
          label: "单行文本",
          type: 10,
          isSelect: false,
          required: true,
          message: "此项为必填",
          line: 1,
          placeholder: "请输入",
          items: [],
          limit: 9,
        },
        {
          label: "多行文本",
          type: 20,
          isSelect: false,
          line: 3,
          message: "此项为必填",
          required: true,
          placeholder: "请输入",
          items: [],
          limit: 9,
        },
        {
          label: "富文本",
          type: 27,
          isSelect: false,
          line: 3,
          message: "此项为必填",
          required: true,
          placeholder: "请输入",
          items: [],
          limit: 9,
        },
        {
          label: "手写签名",
          type: 125,
          isSelect: false,
          line: 3,
          message: "此项为必填",
          required: true,
          placeholder: "请输入",
          items: [],
          limit: 9,
        },
      ],
      list3: [
        {
          label: "单项选择",
          type: 30,
          isSelect: false,
          required: true,
          message: "此项为必选",
          line: 1,
          placeholder: "",
          items: [{ title: "选项1" }, { title: "选项2" }],
          limit: 9,
        },
        {
          label: "多项选择",
          type: 40,
          isSelect: false,
          line: 1,
          message: "此项为必选",
          required: true,
          placeholder: "",
          items: [
            { title: "选项1" },
            { title: "选项2" },
            { title: "选项3" },
            { title: "选项4" },
          ],
          limit: 9,
        },

        {
          label: "下拉单选",
          type: 60,
          isSelect: false,
          required: true,
          message: "此项为必选",
          line: 1,
          placeholder: "请选择",
          items: [
            { title: "选项1" },
            { title: "选项2" },
            { title: "选项3" },
            { title: "选项4" },
          ],
          limit: 9,
        },
        {
          label: "日期选择",
          type: 90,
          isSelect: false,
          required: true,
          message: "此项为必选",
          line: 1,
          placeholder: "请选择日期",
          items: [],
          limit: 9,
          dateType: "date",
        },
        {
          label: "时间选择",
          type: 95,
          isSelect: false,
          required: true,
          message: "此项为必选",
          line: 1,
          placeholder: "请选择时间",
          items: [],
          limit: 9,
          dateType: "time",
        },
        {
          label: "日期时间",
          type: 97,
          isSelect: false,
          required: true,
          message: "此项为必选",
          line: 1,
          placeholder: "请选择日期时间",
          items: [],
          limit: 9,
          dateType: "datetime",
        },

        {
          label: "星级评分",
          type: 50,
          isSelect: false,
          required: true,
          message: "此项为必选",
          line: 1,
          placeholder: "",
          items: [],
          limit: 9,
        },
        {
          label: "滑块评分",
          type: 100,
          isSelect: false,
          required: true,
          message: "此项为必选",
          line: 1,
          placeholder: "",
          items: [],
          limit: 9,
        },
      ],
      list4: [
        {
          label: "图片上传",
          type: 70,
          isSelect: false,
          required: true,
          message: "此项为必选",
          line: 1,
          placeholder: "请选择",
          items: [],
          limit: 9,
        },
        {
          label: "文件上传",
          type: 80,
          isSelect: false,
          required: true,
          message: "此项为必选",
          line: 1,
          placeholder: "请选择",
          items: [],
          limit: 9,
        },
      ],
      list5: [
        {
          label: "姓名",
          type: 23,
          isSelect: false,
          required: true,
          message: "请输入姓名",
          line: 1,
          placeholder: "请输入姓名",
          items: [],
          limit: 9,
        },

        {
          label: "性别",
          type: 30,
          isSelect: false,
          required: true,
          message: "请选择性别",
          line: 1,
          placeholder: "",
          items: [{ title: "男" }, { title: "女" }],
          limit: 9,
        },

        {
          label: "年龄",
          type: 10,
          isSelect: false,
          required: true,
          message: "请输入年龄",
          line: 1,
          placeholder: "请输入年龄",
          items: [],
          limit: 9,
        },

        {
          label: "手机号码",
          type: 10,
          isSelect: false,
          required: true,
          message: "请输入手机号码",
          line: 1,
          placeholder: "请输入手机",
          items: [],
          limit: 9,
        },
        {
          label: "地址",
          type: 10,
          isSelect: false,
          required: true,
          message: "请输入地址",
          line: 1,
          placeholder: "请输入地址",
          items: [],
          limit: 9,
        },

        {
          label: "密码",
          type: 25,
          isSelect: false,
          required: true,
          message: "此项为必填",
          line: 1,
          placeholder: "请输入密码",
          items: [],
          limit: 9,
        },
      ],
      list6: [
        {
          label: "矩阵单选",
          type: 601,
          isSelect: false,
          required: true,
          message: "请选择",
          line: 1,
          placeholder: "请选择",
          items: [
            { title: "男", list: ["优", "良", "合格", "不合格"] },
            { title: "女", list: ["优", "良", "合格", "不合格"] },
          ],
          limit: 9,
        },

        {
          label: "矩阵多选",
          type: 602,
          isSelect: false,
          required: true,
          message: "请选择性别",
          line: 1,
          placeholder: "",
          items: [
            { title: "男", list: ["优", "良", "合格", "不合格"] },
            { title: "女", list: ["优", "良", "合格", "不合格"] },
          ],
          limit: 9,
        },
      ],
    };
  },
  methods: {
    goPreview() {
      this.$router.push({
        name: "Preview",
        query: {
          p: this.uuid,
        },
      });
    },
    queryByUUId() {
      httpService(
        "/javaApi/qtQuestionnaire/queryByUUId",
        "uuid=" + this.uuid,
        "post"
      ).then((data) => {
        if (data) {
          this.isTemplate = data.isTemplate;
          this.title = data.title;
          this.questionnaireId = data.id;
          let upList = data.qtQuestions;
          this.password = data.password;
          this.isAuthWx = data.isAuthWx;
          this.voteUrl = data.voteUrl;
          this.isTimeControl = data.isTimeControl;
          this.isPassword = data.isPassword;
          if (data.showIndex == 1) {
            this.showIndex = true;
          } else {
            this.showIndex = false;
          }
          if (data.isAuthWx == 1) {
            this.isAuthWxIndex = true;
          } else {
            this.isAuthWxIndex = false;
          }
          if (data.isPassword == 1) {
            this.showPasswordIndex = true;
          } else {
            this.showPasswordIndex = false;
          }
          if (data.isTimeControl == 1) {
            this.showTimeIndex = true;
          } else {
            this.showTimeIndex = false;
          }

          if (data.startTime != null) {
            this.daterange[0] = data.startTime;
            this.daterange[1] = data.endTime;
          }

          this.labelPosition = data.labelPosition;
          if (this.labelPosition == "top") {
            this.labelPositionIndex = true;
          } else {
            this.labelPositionIndex = false;
          }
          this.finishMessage = data.finishMessage;

          for (let i = 0; i < upList.length; i++) {
            upList[i].limit = upList[i].limitCount;
            upList[i].sort = i;
            if (upList[i].required == 1) {
              upList[i].required = true;
            } else {
              upList[i].required = false;
            }
          }
          this.list = upList;
        } else {
          this.$router.push({
            path: "/noFound",
          });
        }
      });
    },
    keyEnter() {
      //回车事件
      this.addItemName();
    },
    //form label显示位置
    changePositon(val) {
      if (val) {
        this.labelPosition = "top";
      } else {
        this.labelPosition = "left";
      }
      this.updateQustionnaire();
    },


    changeShowTimeIndex(val) {
      if (val) {
        this.isTimeControl = 1;
      } else {
        this.isTimeControl = 0;
      }
    },
    changeShowPasswordIndex(val) {
      if (val) {
        this.isPassword = 1;
      } else {
        this.isPassword = 0;
      }
    },
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.contentValue = "";
    },
    //移动是否可复制
    cloneMain() { },
    //添加一项
    addItemName() {
      let item = {
        title: "选项" + (this.list[this.indexGlobal].items.length + 1),
      };
      this.list[this.indexGlobal].items.push(item);
    },
    //删除单选多选项
    deleteItemName(idx) {
      if (this.list[this.indexGlobal].items.length > 1) {
        this.list[this.indexGlobal].items.splice(idx, 1);
      } else {
        ElMessage.error("最少保留一项");
      }
    },
    //是否必填提示信息
    changeRadio() {
      let required = this.form.required;
    },
    //保存所有
    saveAll() {
      console.log("保存");
      console.log(this.list);
      let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
      let upList = JSON.parse(JSON.stringify(this.list));
      for (let i = 0; i < upList.length; i++) {
        upList[i].questionnaireId = this.questionnaireId;
        upList[i].limitCount = upList[i].limit;
        upList[i].sort = i;
        if (upList[i].required) {
          upList[i].required = 1;
        } else {
          upList[i].required = 0;
        }
      }
      params.append("list", JSON.stringify(upList));
      params.append("questionnaireId", this.questionnaireId);
      httpService("/javaApi/qtQuestion/batchAdd", params, "post").then((data) => {
        if (data.code == 200) {
          ElMessage.success("保存成功");
          this.queryByUUId();
        } else {
          ElMessage.error("保存失败，请重试！");
        }
      });
    },
    //发布所有
    publishAll() {
      console.log("发布");
      // 调用接口清空，清空后初始化
      let params = new FormData();
      params.append("id", this.questionnaireId);
      params.append("uuid", this.uuid);
      if (this.isAuthWx != null) {
        params.append("isAuthWx", this.isAuthWx);
      }
      if (this.voteUrl != null) {
        params.append("voteUrl", this.voteUrl);
      }
      httpService("/javaApi/qtQuestionnaire/publish", params, "post", {
        "Content-Type": "application/x-www-form-urlencoded",
      }).then((data) => {
        if (data.code == 200) {
          this.$router.replace({
            path: "/publishResult",
            query: { url: data.obj },
          });
        } else {
          ElMessage.error("发布失败，请重试！");
        }
      });
    },
    closeAll() {
      ElMessageBox.confirm("已保存本次设计吗？确定关闭吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.opener = null;
          window.open("", "_self");
          window.close();
        })
        .catch(() => { });
    },
    //清空所有
    clearAll() {
      ElMessageBox.confirm("确定要清空本次所有设计吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.list = [];
          this.indexGlobal = -1;
          // 调用接口清空，清空后初始化
          let params = new FormData();
          params.append("questionnaireId", this.questionnaireId);
          httpService("/javaApi/qtQuestion/clearAll", params, "post").then(
            (data) => {
              if (data.code == 200) {
                ElMessage.success("清空成功");
                this.list = [];
              } else {
                ElMessage.error("清空失败，请重试！");
              }
            }
          );
        })
        .catch(() => { });
    },
    //预览所有
    catAll() { },
    //点击添加
    addItem(index, element) {
      for (var i = 0; i < this.list.length; i++) {
        this.list[i].isSelect = false;
      }
      let item = JSON.parse(JSON.stringify(element)); //深拷贝
      item.isSelect = true;
      this.list.push(item);
      this.indexGlobal = this.list.length - 1;
      this.tabVaule = "题型设置";
      this.form = item;
      setTimeout(() => {
        let box = this.$el.querySelector(".draggable");
        box.scrollTop = box.scrollHeight;
      }, 100);
    },
    log: function (evt) { },
    sort: function (evt) {
      console.log(evt);
    },
    changeShowIndex(e) {
      this.updateQustionnaire();
    },

    changeIsAuthWxIndexIndex(e) {
      if (this.isAuthWxIndex == true) {
        this.isAuthWx = 1;
      } else {
        this.isAuthWx = 0;
      }
      this.updateQustionnaire();
    },
    changeShowFinishPasswordIndex(e) { },
    saveSetting() {
      this.updateQustionnaire();
    },
    updateQustionnaire() {
      let showIndex = this.showIndex;
      let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
      params.append("id", this.questionnaireId);
      params.append("finishMessage", this.finishMessage);
      params.append("labelPosition", this.labelPosition);
      params.append("isAuthWx", this.isAuthWx == null ? '' : this.isAuthWx);
      if (this.daterange != "") {
        params.append("startTimeStr", this.daterange[0]);
        params.append("endTimeStr", this.daterange[1]);
      }
      params.append("password", this.password == null ? '' : this.password);
      params.append("showIndex", showIndex == true ? "1" : "0");
      params.append("isPassword", this.isPassword);
      params.append("isTimeControl", this.isTimeControl);
      httpService("/javaApi/qtQuestionnaire/edit", params, "post").then((data) => {
        if (data.code == 200) {
          ElMessage.success("保存成功");
        } else {
          ElMessage.error("保存失败，请重试！");
        }
      });
    },

    log2: function (evt) {
      let newIndex = 0;
      if (evt.moved) {
        newIndex = evt.moved.newIndex;
      }
      if (evt.added) {
        newIndex = evt.added.newIndex;
      }
      for (var i = 0; i < this.list.length; i++) {
        this.list[i].isSelect = false;
      }
      this.indexGlobal = newIndex;
      this.tabVaule = "题型设置";
      this.form = this.list[newIndex];
      this.list[newIndex].isSelect = true;
    },

    deleteItem(e, index) {
      let item = this.list[index];
      let params = new FormData();
      params.append("code", item.code);
      httpService("/javaApi/qtQuestion/deleteByCode", params, "post").then(
        (data) => {
          if (data.code == 200) {
            ElMessage.success("删除成功");
            this.indexGlobal = -1;
            this.form = {};
            this.list.splice(index, 1);
          } else {
            ElMessage.error("删除失败，请重试！");
          }
        }
      );
    },
    copyItem(e, index) {
      this.indexGlobal = -1;
      console.log(this.list);
      let item = JSON.parse(JSON.stringify(this.list[index]));
      item.code = "";
      let items = item.items;
      for (let i = 0; i < items.length; i++) {
        items[i].code = "";
      }
      this.list.splice(index, 0, item);
      console.log(this.list);
      this.indexGlobal = index + 1;
      this.form = this.list[index + 1];
      for (var i = 0; i < this.list.length; i++) {
        this.list[i].isSelect = false;
      }
      this.list[index + 1].isSelect = true;
    },
    clickItem(index) {
      for (var i = 0; i < this.list.length; i++) {
        this.list[i].isSelect = false;
      }
      this.indexGlobal = index;
      this.tabVaule = "题型设置";
      this.form = this.list[index];
      this.list[index].isSelect = true;
      // 控制右侧显示
      console.log(this.list[index]);
    },

    cloneDog({
      type,
      label,
      isSelect,
      placeholder,
      required,
      line,
      message,
      items,
    }) {
      return {
        type: type,
        label: label,
        isSelect: isSelect,
        placeholder: placeholder,
        required: required,
        line: line,
        message: message,
        items: items,
      };
    },
  },
};
</script>
<style>
.el-tabs__content {
  border-left: 1px solid #dedede;
}

.el-tabs__item.is-active.is-focus {
  border: 0px solid red;
}

.el-rate__icon {
  font-size: 30px;
}

.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 0px;
}

.el-radio {
  line-height: 32px;
}

.m-empty {
  background: url(../../assets/center-bg.png) no-repeat;
  background-repeat: no-repeat;
  background-position: center;
}

.el-switch__label span {
  line-height: 20px;
}

.el-switch {
  margin-left: 10px;
}

.el-divider {
  margin: 0px;
}
</style>
<style scoped>
.dateTimeRange {
  margin-bottom: 16px;
}

.mb-right {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 0px;
}

.ghost {
  border-top: 4px solid #409EFF;
}

.body {
  background: white;
}

.delete-btn {
  margin-top: 10px;
}

.add-btn {
  margin-left: 80px;
}

.index {
  padding-right: 10px;
}

.m-line {
  background: #f2f2f2;
  height: 1px;
  margin-bottom: 10px;
}

.index-left {
  padding: 5px;
}

.delete {
  float: right;
  cursor: pointer;
  padding: 5px;
  margin: 10px;
}

.select-bg {
  border: 1px solid #409EFF;
  /* border: 2px solid #409EFF; */
  color: #606255;
  margin-top: 10px;
  background: white;
  border-radius: 4px;
}

.unselect-bg {
  border: 1px dashed #C4C9E1;
  /* border: 2px dashed #C4C9E1; */
  background: white;
  margin-top: 10px;
  color: #606255;
  border-radius: 10px;
}



.list-group-item-right {
  cursor: move;
  display: flex;
  padding: 20px;

}

.list-group-item-right:hover {
  background: white;
  border-radius: 10px;
}


.operate {
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  text-align: right;
  font-size: 17px;
  padding-left: 20px;
  white-space: nowrap;
  background: white;
  padding-right: 20px;
}

.logo {
  color: #333333;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  padding-left: 10px;
  white-space: nowrap;
}

.logo-bottom {
  border-top: solid #dedede 1px;
  border-right: solid #dedede 1px;
  height: calc(100vh - 60px);
  padding: 10px;
}

.sub-title {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  min-width: 100px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.list-group-item-left {
  cursor: move;
  width: 50%;
}

.list-group-item-left .components-item {
  display: inline-block;
  width: calc(100% - 8px);
  margin: 4px;
  -webkit-transition: -webkit-transform 0ms !important;
  transition: -webkit-transform 0ms !important;
  transition: transform 0ms !important;
  transition: transform 0ms, -webkit-transform 0ms !important;
}

.item {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.components-body:hover {
  /* border: 2px solid #2A7EFF; */
  box-shadow: 0 0 0 2px #2A7EFF;
  color: #2A7EFF;
  font-weight: bold;
  box-sizing: border-box;
}

.components-body {
  color: #A1A9C4;
  /* border: 2px solid #E6E8F1; */
  box-shadow: 0 0 0 1.5px #E6E8F1;
  background-color: #fff;
  padding: 8px 10px;
  font-size: 16px;
  cursor: move;
  text-align: center;
  border-radius: 6px;
  box-sizing: border-box;
}

.components-title {
  font-size: 16px;
  color: #222;
  margin: 10px 2px;
  font-weight: bold;
  font-family: "Microsoft YaHei", sans-serif;
}

.left-board {
  width: 260px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
}

.center-board {
  height: 100vh;
  width: auto;
  margin: 0 350px 0 260px;
  background: #f3f5f6;
}

.draggable {
  height: calc(100vh - 80px);
  width: auto;

  overflow: scroll;
  border-top: 1px solid #dedede;
  padding: 10px 10px 30px 10px;
}

.right-board {
  width: 350px;
  position: absolute;
  right: 0;
  top: 0;
  height: 100vh;
}

.right-content {
  width: calc(100% - 37px);
  height: calc(100vh - 60px);
  padding: 10px;
  overflow: auto;
}

.el-form-item--default {
  --font-size: 14px;
  --el-form-label-font-size: var(--font-size);
  margin-bottom: 18px;
  width: 100%;
}

.esign {
  max-width: 1000px;
  margin: auto;
  padding: 10px;
}

.esigh-btns button {
  color: #fff;
  height: 40px;
  width: 100px;
  font-size: 16px;
  margin-right: 10px;
  outline: none;
  border-radius: 4px;
  background: #f60;
  border: 1px solid transparent;
}

.esigh-btns button:active {
  color: #fff;
  box-shadow: 0px 0px 50px orangered inset;
}

.esigh-result {
  margin-top: 10px;
}

.esigh-result img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #ececee;
}

.esignature {
  margin: 10px 0;
  border: 1px solid #79bbff;
  border-radius: 4px;
}

.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0px;
}

h3 {
  padding-left: 10px;
}


.el-form-item {
  width: 100%;
}

.el-form-item__content {
  width: 100%;
}
</style>
